<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3c.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <style>
.ui-widget,.ui-widget .ui-widget {
	font-size: 12px !important;
}

.ui-inputfieldStyle {
	border: none;
	box-shadow: none;
}
</style>
</h:head>
<h:body>
  <div style="width: 100%;" align="left">
    <h:form>
      <p:tabView style="width: 70%;">
        <p:tab title="Cadastro">
          <p:accordionPanel multiple="true">
            <p:tab title="Cadastro de solicitações">
              <p:growl id="msg" />
              <p />
              <fieldset style="border-style: solid; border-color: #DBDBD7;">
                <p />
                <legend style="padding: 4px 7px; font-size: 14px; font-weight: bolder;">Dados Pessoais</legend>
                <label><b>Nome:</b></label>&#160;&#160;
                <p:inputText value="#{personBean.person.firstName}" size="20" style="heigth: 10; box-shadow:none" />
                &#160;&#160;&#160;&#160; <label><b>Sobrenome:</b></label>&#160;&#160;
                <p:inputText value="#{personBean.person.secondName}" size="45" style="box-shadow:none" />
                <p />
                <label><b>Data de Nascimento:</b></label>&#160;&#160;
                <p:calendar size="10" style="box-shadow:none" value="#{personBean.person.birthDate}" />
                <p />
                <label><b>CPF:</b></label>&#160;&#160;
                <p:inputText size="21" style="box-shadow:none" value="#{personBean.person.cpf}" />
                &#160;&#160;&#160;&#160; <label><b>R.G.:</b></label>&#160;&#160;
                <p:inputText size="20" style="box-shadow:none" value="#{personBean.person.rg}" />
              </fieldset>
              <p />
              <fieldset style="border-style: solid; border-color: #DBDBD7;">
                <legend style="padding: 4px 7px; font-size: 14px; font-weight: bolder;">Endereço</legend>
                <label><b>Endereço:</b></label>&#160;&#160;
                <p:inputText size="40" style="box-shadow:none" value="#{personBean.person.address.rua}" />
                &#160;&#160;&#160;&#160; <label><b>Nº:</b></label>&#160;&#160;
                <p:inputText size="10" style="box-shadow:none" value="#{personBean.person.address.numero}" />
                <p />
                <label><b>Complemento:</b></label>&#160;&#160;
                <p:inputText size="50" style="box-shadow:none" value="#{personBean.person.address.complemento}" />
                &#160;&#160;&#160;&#160; <label><b>Bairro:</b></label>&#160;&#160;
                <p:inputText size="20" style="box-shadow:none" value="#{personBean.person.address.bairro}" />
                <p />
                <label><b>Cidade:</b></label>&#160;&#160;
                <p:inputText size="50" style="box-shadow:none" value="#{personBean.person.address.cidade}" />
                &#160;&#160;&#160;&#160; <label><b>Estado:</b></label>&#160;&#160;
                <p />
                <label><b>CEP:</b></label>&#160;&#160;
                <p:inputText size="10" style="box-shadow:none" value="#{personBean.person.address.CEP}" />
              </fieldset>
              <p />
              <fieldset style="border-style: solid; border-color: #DBDBD7;">
                <legend style="padding: 4px 7px; font-size: 14px; font-weight: bolder;">Dados da Solicitação</legend>
                <p />
                <p:inputTextarea cols="80" rows="10" style="box-shadow:none" value="#{personBean.request.description}" />
              </fieldset>
              <p />
              <fieldset style="border-style: solid; border-color: #DBDBD7;">
                <legend style="padding: 4px 7px; font-size: 14px; font-weight: bolder;">Vincular Pessoa</legend>
                <label>Nome do Evento:</label>
                <p:inputText size="35" style="box-shadow:none" />
                <p:commandButton value="Buscar" action="#" />
                <p />
                <p:dataTable value="#">
                  <p:column id="modelHeader" style="text-align: center;">
                    <f:facet name="header">Evento</f:facet>
                    <h:outputText value="VX Cavalgada" />
                  </p:column>
                  <p:column id="datalHeader" style="text-align: center;">
                    <f:facet name="header">Data</f:facet>
                    <h:outputText value="10/12/2011" />
                  </p:column>
                  <p:column id="participouHeader" style="text-align: center;">
                    <f:facet name="header">Participou</f:facet>
                    <p:selectBooleanCheckbox>
                      <f:selectItem itemLabel="" itemValue="Option 1" />
                    </p:selectBooleanCheckbox>
                  </p:column>
                </p:dataTable>
              </fieldset>
              <br />
              <p:commandButton value="Enviar" action="#{personBean.cadastrar}" />
            </p:tab>
          </p:accordionPanel>
        </p:tab>
        <p:tab title="Consultas">
          <div style="height: 5%;"></div>
          <fieldset style="border-style: solid; border-color: #DBDBD7;">
            <legend style="padding: 4px 7px; font-size: 14px; font-weight: bolder;">Eventos</legend>
            <label><b>Nome:</b></label>&#160;&#160;
            <p:inputText size="30" style="box-shadow:none" value="Cavalgada" />
            &#160;
            <p:commandButton action="#" value="Buscar" />
            Data: &#160; &#160; <p:calendar size="10" style="box-shadow:none" value="#{personBean.person.birthDate}" id="teste" />
            <p />
            <p />
            <p:dataTable id="basic" var="e" value="#{personBean.lista}" style="width: 80%;">
              <p:column id="modelHeader">
                <f:facet name="header">
                  <h:outputText value="Nome" />
                </f:facet>
                <h:outputText value="#{e.evento}" />
              </p:column>
              <p:column id="modelHeader" style="text-align: center;">
                <f:facet name="header">
                  <h:outputText value="Data" />
                </f:facet>
                <h:outputText value="#{e.data}" />
              </p:column>
              <p:column id="modelHeader" style="width: 5%; text-align: center;">
                <f:facet name="header">
                  <h:outputText value="Detalhar" />
                </f:facet>
                <h:graphicImage value="/images/details.jpg"></h:graphicImage>
              </p:column>
            </p:dataTable>
          </fieldset>
          <div style="height: 5%;"></div>
          <fieldset style="border-style: solid; border-color: #DBDBD7;">
            <legend style="padding: 4px 7px; font-size: 14px; font-weight: bolder;">Pessoas</legend>
            <label><b>Nome:</b></label>&#160;&#160;
            <p:inputText size="30" style="box-shadow:none" value="Silva" />
            &#160;
            <p:commandButton action="#" value="Buscar" />
            <p />
            <p />
            <p:dataTable id="basic" var="e" value="#{personBean.listaPessoas}" style="width: 80%;">
              <p:column id="modelHeader">
                <f:facet name="header">
                  <h:outputText value="Nome" />
                </f:facet>
                <h:outputText value="#{e.evento}" />
              </p:column>
              <p:column id="modelHeader" style="text-align: center;">
                <f:facet name="header">
                  <h:outputText value="Data" />
                </f:facet>
                <h:outputText value="#{e.data}" />
              </p:column>
              <p:column id="modelHeader" style="width: 5%; text-align: center;">
                <f:facet name="header">
                  <h:outputText value="Detalhar" />
                </f:facet>
                <h:graphicImage value="/images/details.jpg"></h:graphicImage>
              </p:column>
            </p:dataTable>
          </fieldset>
        </p:tab>
        <p:tab title="Etiquetas">
          <p:selectManyCheckbox layout="pageDirection">
            <f:selectItem itemLabel="Sexo" itemValue="Option 2" />
            <f:selectItem itemLabel="Data de Nasc." itemValue="Option 5" />
            <f:selectItem itemLabel="Bairro" itemValue="Option 6" />
          </p:selectManyCheckbox>
          <p />
          <label><b>Sexo:</b></label>&#160;&#160;
					<p:selectOneMenu value="">
            <f:selectItem itemLabel="" itemValue="" />
            <f:selectItem itemLabel="F" itemValue="F" />
            <f:selectItem itemLabel="M" itemValue="M" />
          </p:selectOneMenu>
			        &#160;&#160;<label><b>Data de Nasc.:&#160;&#160;</b></label>
          <p:calendar value="#{personBean.data}" id="popupCal" pattern="dd/mm/yyyy" />
        </p:tab>
      </p:tabView>
    </h:form>
  </div>
</h:body>
</html>